﻿@import "animate.css";
@import "font-awesome.css";

/*scrollbar*/
::-webkit-scrollbar {width:8px;height:8px;}
::-webkit-scrollbar-track {
    background-color:transparent;
    -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;
}
::-webkit-scrollbar-thumb {
    background-color:#9c9da0;
    -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;
}

:root {
    --theme-color: #1c66b9;/*#4188c8*/
    --sider-color: #1c292e;
    --line-color: #ccc;
    --th-bgcolor: #f1f1f1;
    --border-radius: 0.2rem;
}

*{margin:0;padding:0;}
html, body {font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1rem;overflow:hidden;}
html, body, img, iframe, .chart {width:100%;height:100%;}
iframe {border:none;}
a {text-decoration:none;}
table {border-collapse:collapse;width:100%;}
ul {list-style:none;}
pre {
    word-wrap:break-word;white-space:pre-wrap;font-family:inherit;
    white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;
}
button, .button, input, select, textarea, .form-input .icon, .search-box .icon,
.box, .card, .group-box, .dialog, .dlg-tips, 
.kui-tips, .kui-content, .kui-tabs .tab-body.top,
.switch[type="checkbox"]+span:before, .switch[type="checkbox"]+span:after {
    -webkit-border-radius:var(--border-radius);-moz-border-radius:var(--border-radius);border-radius:var(--border-radius);
}
.button {display:block;}
button, .button, input, select, textarea {
    outline:none;box-sizing:border-box;font-family:inherit;font-size:inherit;background-color:#fff;
}
button, .button {cursor:pointer;border:none;padding:0 0.8rem;background-color:#3492d0;color:#fff;}
button .icon, .button .icon {text-align:center;margin-right:5px;}
button:hover, .button:hover {-moz-opacity:0.8;opacity:0.8;filter:alpha(opacity=80);}
input:read-only, select:disabled, textarea:read-only {background-color:#f5f5f5;}
input.select:read-only {background-color:#fff;}
input.select:disabled {background-color:#f5f5f5;}
input[type="text"], textarea {position:relative;}
input, select, textarea, .list-box {width:100%;min-width:100px;border:1px solid #ccc;padding:0 0.5rem;}
textarea {height:100%;min-height:4rem;padding:0.2rem;font-family:inherit;}
input[type="number"], input[type="password"] {padding-right:0;}
input[type="color"] {width:2rem;min-width:2rem;padding:0 0.12rem;}
input[type="checkbox"], input[type="radio"] {width:1.3rem;min-width:1.3rem;height:1.3rem;}
input[type="checkbox"]+span, input[type="radio"]+span {margin-left:25px;}

.switch[type="checkbox"] {opacity:0;height:0;}
.switch[type="checkbox"]+span {position:relative;margin-left:0;padding-left:3rem;}
.switch[type="checkbox"]+span:before, .switch[type="checkbox"]+span:after {position:absolute;display:block;content:'';}
.switch[type="checkbox"]+span:before {background:#b5b5b5;width:2.6rem;height:1.5rem;top:-2px;left:0;}
.switch[type="checkbox"]+span:after {background:#fff;width:1rem;height:1rem;top:0.12rem;left:0.4rem;}
.switch[type="checkbox"]:checked+span:before {background-color:#3492d0;}
.switch[type="checkbox"]:checked+span:after {left:unset;left:1.2rem;}

.error label {color:#d9534f;}
.error input, .error select, .error textarea, 
.error .list-box, .error .editor {border-bottom:2px solid #d9534f;}
input:focus, select:focus, textarea:focus {border-bottom:2px solid #5bc0de;}

.box, .card, .dialog, .kui-tips, .kui-content {background-color:#fff;}
.circle {-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}
.left {float:left;}
.right {float:right;}
.icon {font-size:1rem;}
.tips {color:#00f;}
.quickview {
    display:none;position:absolute;top:0;bottom:0;right:0;z-index:9999;width:50%;transition:.3s ease;
    background-color:#fff;box-shadow:5px 0 13px 3px rgba(0,0,0,.1);
}
.quickview .title {font-weight:bold;padding:1rem 0 0 1rem;}
.quickview.active {display:block;}

/*listBox*/
.list-box {padding:1px;overflow:auto;height:100%;min-height:200px;}
.list-box.disabled {background-color:#f1f1f1;}
.list-box .item {position:relative;padding:5px 10px;cursor:pointer;}
.list-box .item:hover {background-color:#f1f1f1;}
.list-box .item.active {background-color:#337ab7;color:#fff;}

/*search-box*/
.search-box {position:relative;}
.search-box input {width:100%;padding-left:0.5rem;}
.search-box .icon, .form-input .icon {
    position:absolute;top:0;bottom:0;right:0;cursor:pointer;
    width:2rem;text-align:center;margin:0;padding-top:0.45rem;
}
.search-box .icon {color:#bbb;}
.search-box:has(.icon) > input, .form-input:has(.icon) > input {padding-right:2.1rem;}

/*group-box*/
.group-box {position:relative;border:1px solid var(--line-color);}
.group-box .legend {position:absolute;top:-10px;left:20px;background-color:#fff;padding:0 10px;}

/*card*/
.card {position:absolute;top:0;left:0;right:0;bottom:0;}
.card-head {position:relative;height:40px;line-height:40px;margin:0 10px;padding:0 5px;border-bottom:2px solid var(--line-color);}
.card-head .icon {margin-right:5px;}
.card-head .tool {position:absolute;top:0;right:10px;color:#00f;cursor:pointer;font-weight:normal;}
.card-body {position:absolute;top:42px;left:1px;right:1px;bottom:1px;padding:5px;overflow:auto;}

/*attach*/
.attachButton {
    position:relative;margin:5px 0;padding:5px 0;text-align:center;width:100px;background-color:#337ab7;color:#fff;
    -webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;
}
.attachButton:hover {-moz-opacity:0.8;opacity:0.8;filter:alpha(opacity=80);}
.attachButton span {margin-left:5px;}
.attachButton .upload {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;outline:0;}
.attachFile {display:inline-block;width:50%;height:30px;line-height:30px;}

/*pic*/
.pic-box {position:absolute;top:0;left:0;right:0;bottom:0;z-index:99999;}
.pic-box img {width:100%;height:auto;}

/*empty*/
.empty {text-align:center;margin:50px 0 20px 0;}
.empty i {font-size:6rem;color:#ccc;}
.empty p {font-size:1.2rem;color:#ccc;margin-top:20px;}

/*error*/
.error-box {
    position:absolute;top:0;bottom:0;left:0;right:0;text-align:center;
    background-color:#f1f1f1;padding-top:200px;
}
.error-box h1 {font-size:150px;}
.error-box h3 {font-weight:bold;padding:5px;}

/*badge,progress*/
.badge, .progress, .progress .value {color:#fff;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.badge {padding:3px 5px;background-color:#009688;cursor:pointer;font-size:1rem;}
.badge-top {
    position:absolute;top:0;right:0;font-size:0.5rem;padding:0;width:16px;height:16px;line-height:16px;
    background-color:#d9534f;color:#fff;text-align:center;
    -webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;
}
.progress, .progress .value {display:block;height:20px;line-height:20px;}
.progress {background-color:#ccc;width:100%;}
.progress .value {background-color:#3399C6;text-align:right;font-size:0.8rem;padding-right:5px;}

/*slider*/
.slider {width:100%;height:100%;overflow:hidden;position:relative;}
.slider-item {position:absolute;top:0;left:0;width:100%;height:100%;display:none;}
.slider-item.active {display:block;}
.slider-snk {position:absolute;left:0;right:0;bottom:10px;z-index:9999;text-align:center;}
.slider-snk span {display:inline-block;width:10px;height:10px;background-color:#fff;margin:0 3px;}
.slider-snk span.active {background-color:#08c4b1;}

/*tabs*/
.tabs {position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;}
.tab {display:flex;}
.tab.left {flex-direction:column;}
.tab li {margin:0 20px;padding:10px 5px;cursor:pointer;}
.tab li.active {font-weight:bold;border-radius:1px;}
.tab.top {border-bottom:1px solid var(--line-color);}
.tab.top li.active {border-bottom:4px solid #5cb85c;}
.tab.left {height:100%;border-right:1px solid var(--line-color);padding:10px 0;}
.tab.left li {text-align:right;margin:10px 0;padding:0 20px;border-right:4px solid #fff;}
.tab.left li.active {border-right-color:#5cb85c;}
.tab.bottom {border-top:1px solid var(--line-color);position:absolute;left:0;right:0;bottom:0;height:50px;}
.tab.bottom li {display:inline-block;border-top:4px solid transparent;}
.tab.bottom li.active {border-top:4px solid #5cb85c;}
.tab-body {position:absolute;top:0;left:0;right:0;bottom:0;padding:10px;overflow:auto;}
.tab-body.top {top:50px;}
.tab-body.left {left:100px;}
.tab-body.bottom {bottom:50px;}
.tab-tool {position:absolute;top:5px;right:10px;z-index:9999;}

/*steps*/
.steps ul {display:flex;justify-content:space-between;overflow:hidden;}
.steps li {position:relative;}
.steps li .item {padding:0.5rem 1rem;font-weight:bold;background-color:#fff;}
.steps li:after {display:block;height:2px;background-color:#ccc;content:'';position:absolute;top:50%;left:100%;width:9999px;}
.steps li:last-child:after {display:none;}
.steps li.finish {color:#5cb85c;}
.steps li.finish:after {background-color:#5cb85c;}
.steps li.active {color:#3492d0;}
.steps li.active:after {background-color:#3492d0;}
.step-body {padding:1rem;}
.step-btns {text-align:right;}
.step-btns button {margin-left:1rem;}

/*tool*/
.tool button {margin-right:5px;padding:0 10px;}
.dropdown {position:relative;display:inline-block;}
.dropdown > .button, .dropdown > .link {display:block;padding-right:1.5rem;}
.dropdown > .icon {position:absolute;top:7px;right:10px;color:#fff;}
.dropdown > .link+.icon {color:#888;top:0;right:0;}
.dropdown .child {display:none;position:absolute;right:0;z-index:9999;background-color:#fff;border:1px solid var(--line-color);margin-top:1px;}
.dropdown .child .item {white-space:nowrap;padding:0 10px;cursor:pointer;line-height:36px;}
.dropdown .child .item:hover {background-color:#f1f1f1;}
.dropdown:hover .child {display:block;}

/*query*/
.query .form-item {display:inline-block;margin:0;}
.query .form-label, .query .form-input {display:inline-block;}
.query .form-item, .query .form-label {padding:0 5px 0 0;float:none;}
.query input, .query select {width:130px;min-width:130px;}
.query input[type="checkbox"], .query input[type="radio"] {width:20px;min-width:20px;}
.query button {margin-left:5px;}
.query-adv {width:450px;}
.query-adv .item {display:grid;grid-column-gap:5px;grid-template-columns:25% 25% auto;margin-bottom:0.8rem;}
.query-adv .form {position:absolute;top:50px;bottom:0;left:0;right:0;}
.query-adv .form-body {position:absolute;top:0;bottom:50px;left:0;right:0;padding:10px;overflow:auto;}
.query-adv .form-button {position:absolute;bottom:0;left:0;right:0;height:50px;line-height:50px;margin:0;}

/*data*/
.list-view, .grid-view, .list, .grid, .pager {position:absolute;left:0;right:0;bottom:0;}
.list-view, .grid-view {top:10px;bottom:10px;left:10px;right:10px;}
.list, .grid {top:0;overflow:auto;}
.tab-body .grid-view {top:10px;left:10px;right:10px;bottom:10px;}
.toolbar {height:40px;line-height:40px;}
.grid {left:0;right:0;top:0;bottom:0;z-index:1000;}
.grid .table {position:absolute;left:0;right:0;top:0;bottom:0;overflow:auto;}

.table {border-top:2px solid var(--line-color);border-bottom:1px solid var(--line-color);}
.table th, .table td {padding:5px 10px;text-align:left;white-space:nowrap;}
.table th .icon {margin-left:10px;color:#dfdfdf;}
.table th .icon.sort {color:#485fc7;}
.table td {overflow:hidden;text-overflow:ellipsis;max-width:300px;}
.table tfoot td {font-weight:bold;}
.table .index, .table .check, .table .check-box {width:20px;min-width:20px;text-align:center;}
.table .index .icon {color:#000;margin-left:0;text-align:center;}
.table .check .form-radio, .table .check-box .form-radio {margin-right:0;height:20px;line-height:20px;}
.table .check .form-radio input, .table .check-box .form-radio input {top:0;}
.table .check .form-radio span, .table .check-box .form-radio span {margin-left:20px;}
.table .txt-center {text-align:center;}
.table .txt-right {text-align:right;}

.table .action {width:80px;text-align:center;position:sticky;z-index:1;right:0;background-color:#fff;}
.table .action .link {padding:0 3px;}
.table .action .icon {margin:0 5px;cursor:pointer;font-size:1.2rem;}
.table td.action {overflow:unset;}

.table.fixed thead th.fixed,
.table.fixed tbody td.fixed,
.table.fixed tfoot td:first-child {position:sticky;left:0;z-index:1;}
.table.fixed tbody td.fixed {background-color:#fff;}
.table.fixed thead th {position:sticky;top:0;z-index:2;}
.table.fixed tfoot td {position:sticky;bottom:0;z-index:2;}
.table.fixed thead th.fixed,
.table.fixed thead th.action,
.table.fixed tfoot td:first-child {z-index:3;}

.table th, .table th.fixed, .table th.action, .table tfoot td {background-color:var(--th-bgcolor);}
.table tr.even, .table tr.even td.fixed, .table tr.even td.action {background-color:#f8f8f8;}
.table tr:hover, .table tr:hover td.fixed, .table tr:hover td.action {background-color:#fcfcfc;}
.table tr.active, .table tr.active td.fixed, .table tr.active td.action {background-color:#f8eaba;}
.table tr.selected, .table tr.selected td.fixed, .table tr.selected td.action {background-color:#f0eebb;}

.hasToolbar {top:40px;}
.hasPager, .form .hasPager {bottom:40px;}

/*pager*/
.pager {padding:5px 0;font-size:0.9rem;}
.pager ul {display:flex;justify-content:end;}
.pager ul li {min-width:28px;}
.pager ul li, .pager input, .pager select, .pager button {height:28px;line-height:28px;margin:0 5px;}
.pager select {margin:0;}
.pager input, .pager select, .pager button {padding:0 5px;}
.pager input {width:50px;min-width:50px;text-align:center;}
.pager .btn {cursor:pointer;text-align:center;background-color:#f4f4f5;border-radius:var(--border-radius);}
.pager .btn.active {background-color:#3492d0;color:#fff;}
.pager .btns {display:inline-block;}
.pager .btns li {display:inline-block;width:30px;text-align:center;color:#00f;cursor:pointer;position:relative;}
.pager .btns li.text {color:#333;cursor:default;font-weight:bold;width:auto;}

/*form*/
.form-title {font-size:1.5rem;font-weight:bold;text-align:center;padding:1rem;}
.form-caption {border-left:5px solid #337ab7;padding-left:5px;height:40px;line-height:40px;font-size:1.1rem;font-weight:bold;}
.form-caption .right {margin-top:5px;margin-right:5px;}
.form-item, .form-label, .form-text, .form-input, .form-tips {display:block;}
.form-item {display:block;position:relative;margin-top:1rem;}
.form-label {float:left;padding:0 0.5rem;font-weight:bold;}
.form-input {position:relative;}
.form-item:after, .form-input:after {display:block;content:'';clear:both;}
.form-input .unit, .form-input .btn, .form-input .captcha {position:absolute;right:0;padding:0 5px;}
.form-input .btn {border:1.5px solid var(--line-color);background-color:#f1f1f1;cursor:pointer;}
.form-input .captcha {padding:0;border:none;}
.form-input.check {font-weight:bold;}
.form-check {position:absolute;top:5px;right:0;}
.form-radio {position:relative;margin-right:1rem;cursor:pointer;display:inline-block;}
.form-radio input {position:absolute;top:0.4rem;}
.form-tips {padding-left:5px;color:#aaa;}
.form-button {text-align:center;margin-top:1rem;}
.form-button button {margin-right:1rem;}
.form-item, .form-button, .tips {padding:0 1rem;}
.form-item .link {padding-left:0.5rem;}
.block .form-radio {display:block;height:auto;}
.form {padding:1rem;}
.form th, .form td {padding:5px;border-bottom:1px solid var(--line-color);}
.form th {text-align:right;padding-right:0.5rem;background-color:var(--th-bgcolor);}
.form td.inline .form-input {display:inline-block;}
.form td .query .form-input, .form td .inline .form-input, .form-files span {margin-right:5px;}
.form-file {padding:5px 0;}
.form .tool {display:flex;line-height:2rem;}
.form .tool button {background-color:transparent;color:#333;}
.form table {border-top:2px solid var(--line-color);}
.form .table table {border-top:none;}
.form .table th {text-align:center;}
.form .table td {border-bottom:none;}
.form-grid {bottom:60px;}

.row {display:grid;grid-template-columns:repeat(auto-fit,minmax(0%,1fr));}
.row .form-item {margin-top:0;padding-left:0;}
.row .form-input {display:inline-block;}
.row .form-label {padding-left:0;min-width:80px;}
.row .form-item input, .row .form-item select {min-width:200px;}

/*import*/
.import-form .form-item {margin:5px 0;padding:0;}
.import-form .form-input {display:inline-block;}
.import-form .size {margin-left:10px;}
.import-form .message {color:#337ab7;padding:10px 5px;}

/*dialog*/
.dlg-tips {
    position:absolute;width:auto;top:10px;right:10px;text-align:center;
    color:#fff;background-color:#48c78e;margin:0 auto;padding:1rem 2rem;z-index:9999999;
}
.dialog, .dlg-body, .dlg-foot, .dlg-content,
.dialog .form, .dialog .form-body, .dialog .form-list, .dialog .form-button {position:absolute;left:0;right:0;}
.dialog {border:2px solid var(--line-color);top:50%;left:50%;z-index:9999999;}
.dialog.max {top:0;left:0;right:0;bottom:0;}
.dlg-head, .dlg-foot {padding:0 10px;}
.dlg-head {position:relative;border-bottom:1px solid var(--line-color);font-weight:bold;font-size:1.2rem;}
.dlg-head.draggable {cursor:move;}
.dlg-head .btns {position:absolute;top:0;right:0;width:100px;}
.dlg-head .btns .bmin {position:absolute;top:13.5px;right:65px;font-size:0.9rem;cursor:pointer;}
.dlg-head .btns .bmax {position:absolute;top:13.5px;right:35px;font-size:0.9rem;cursor:pointer;}
.dlg-body, .dialog .form {top:50px;bottom:52px;padding:10px;overflow:auto;}
.dlg-content {top:50px;bottom:0;}
.dlg-body .message {text-align:center;margin-top:20px;font-size:1.2rem;}
.dlg-foot, .dialog .form-button {margin:0;bottom:0;text-align:right;}
.dlg-foot button {margin-left:10px;}
.dlg-head, .dlg-foot, .dialog .form-button {height:50px;line-height:50px;}
.dialog .form {top:1px;bottom:0;}
.dialog .form.nb {bottom:1px;}
.dialog .form-body {top:0;bottom:50px;padding:10px;}
.dialog .form-list {top:80px;bottom:0;}
.dialog .form-list .grid-view {top:0;bottom:0;}
.dialog .form-button.inline {padding:0 10px;}
.dialog .form-button button {margin:0;margin-left:10px;}
.dialog .hasQuery {padding:10px 10px 0 10px;}
.dialog .pager {padding:0 10px;}
.dialog .import-form {padding:20px;bottom:0;}

/*common*/
.mask {position:absolute;left:0;right:0;top:0;bottom:0;background-color:rgb(10,10,10,0.3);}
.disabled {color:#ccc;}
.close {position:absolute;top:10px;right:10px;cursor:pointer;}
.close:hover {color:#d9534f;}
.link {color:#00f;cursor:pointer;}
.bold {font-weight:bold;}
.primary {color:#3492d0;}
.success {color:#5cb85c;}
.info    {color:#5bc0de;}
.warning {color:#f0ad4e;}
.danger  {color:#d9534f;}
.orange  {color:#f0ad4e;}
.bg-primary, .form .tool button.bg-primary:hover {background-color:#3492d0;color:#fff;}
.bg-success, .form .tool button.bg-success:hover {background-color:#5cb85c;color:#fff;}
.bg-info,    .form .tool button.bg-info:hover    {background-color:#5bc0de;color:#fff;}
.bg-warning, .form .tool button.bg-warning:hover {background-color:#f0ad4e;color:#fff;}
.bg-danger,  .form .tool button.bg-danger:hover  {background-color:#d9534f;color:#fff;}
.bg-gray,    .form .tool button.bg-gray:hover    {background-color:#ccc;color:#888;}
.bg-default, .form .tool button.bg-default:hover {background-color:#bbb;color:#333;}
.txt-center {text-align:center;}
.txt-left {text-align:left;}
.txt-right  {text-align:right;}
.box-left, .box-right {position:absolute;top:0;bottom:0;}
.box-left  {left:0;width:120px;}
.box-right {right:0;left:120px;}
.clickable {cursor:pointer;pointer-events:all;}
td .icon, .tab .icon {width:20px;text-align:center;margin-right:2px;}
.mt10 {margin-top:10px;}
.mb10 {margin-bottom:10px;}

/*tree*/
.tree {position:relative;color:#606266;}
.tree .icon {align-items:center;display:inline-flex;justify-content:center;width:1.5rem;height:1.5rem;}
.tree .tree-list {padding-left:20px;margin:0;display:none;}
.tree .tree-list.show {display:block;}
.tree .tree-item {list-style:none;cursor:pointer;margin:0;display:flex;align-items:center;width:100%;}
.tree .tree-item.is-disabled {color:#c0c4cc;cursor:not-allowed;}
.tree .tree-item:before {content:"";position:absolute;left:0;width:100%;height:26px;transition:background-color .3s linear;z-index:-1;}
.tree .tree-item.active, 
.tree .tree-item:hover {color:#1c66b9;font-weight:bold;}
.tree .tree-item .tree-content {position:relative;display:flex;padding:.15em 0;align-items:center;flex-grow:1;}
.tree .tree-root {padding:0;}

/*font*/
.breadcrumb li:after, 
.menu-tree .child > .item:after {font:normal normal normal 1rem FontAwesome;}

/*breadcrumb*/
.breadcrumb {height:1.5rem;line-height:1.5rem;padding:0.5rem 1rem;}
.breadcrumb li {display:inline-block;padding-right:0.5rem;}
.breadcrumb li.home {cursor:pointer;}
.breadcrumb li:after {display:inline-block;content:'\f105';padding-left:0.5rem;}
.breadcrumb li:last-child:after {content:'';}

/*menu*/
.menu-tab {padding:20px 0;}
.menu-tab li {cursor:pointer;height:60px;line-height:60px;padding:0 20px;font-weight:bold;}
.menu-tab li .icon {display:inline-block;font-size:1.5rem;}
.menu-tab li .name {display:inline-block;font-size:1.2rem;margin-left:15px;}
.menu-tab li.active {background-color:#fff;color:#000;}

.menu-tree {width:180px;}
.menu-tree .item {display:block;position:relative;line-height:2.5rem;border-left:5px solid transparent;cursor:pointer;}
.menu-tree .item:hover {border-left-color:#5cb85c;-webkit-transition:all .3s;transition:all .3s;}
.menu-tree .item.active {border-left-color:#5cb85c;background-color:#2fb2e8;}
.menu-tree .child > .active {border-left-color:transparent;background-color:transparent;}
.menu-tree .child > .item:after {display:inline-block;content:'\f105';float:right;margin-top:0.75rem;}
.menu-tree .child > .active:after {content:'\f107';}
.menu-tree ul {display:none;background-color:rgb(255,255,255,0.1)}
.menu-tree .item.active+ul {display:block;}
.menu-tree > li > .item {padding:0 12px;}
.menu-tree > li > ul > li > .item {padding-left:2rem;}

/*page*/
.sys-active {margin:0 auto;width:360px;}
.sys-active .form-item {}
.sys-active .form-label {width:80px;}
.sys-active input {width:auto;}